<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { configKey, getPointInfo, getElectronicFenceInfo } from '@/api/earlyWarning';
import componentsTitle from '@/constants/components/componentsTitle';
import { getResourceInfo } from '@/api/Assist';

const props = defineProps(['close', 'id', 'mapData', 'componentChild', 'type']);
const Someday = ref<string>('');
const currentPointInfo = ref<any>(null);
const dialogTitle = computed(() => {
  if (props.mapData.moduleTitle === componentsTitle.THIRD_PARTY_CONSTRUCTION_MONITORING) return props.mapData.moduleTitle;
  return (
    props.mapData.name ||
    props.mapData.instPos ||
    props.mapData.alarmTitle ||
    (props.mapData.occurrenceAddress && props.mapData.occurrenceAddress + props.mapData.typeName + '预警') ||
    props.mapData.type ||
    props.mapData.label
  );
});
const isAlarmVideo = computed(() => props.type === 'VIDEO');
const goElectronicFence = async (monitoringCode) => {
  try {
    const { data } = await getElectronicFenceInfo({ monitoringCode });
    window.open(`http://${data.ipAddressAiu}:8088`, '_blank');
  } catch (error) {
    console.warn(error, '获取电子围栏数据失败!');
  }
};
onMounted(async () => {
  if (props.type === 'ThirdPartyDevices') {
    currentPointInfo.value = props.mapData;
  } else if (props.type === 'valve') {
    currentPointInfo.value = props.mapData;
    return;
  } else if (props.type === 'resource') {
    const { moduleId, pid, label, classify, point, source, cim, sourceCode, selected, type, longitude, latitude } = props.mapData;
    const params = {
      id: moduleId,
      pid,
      label,
      classify,
      point,
      source,
      cim,
      sourceCode,
      selected,
      type,
      longitude,
      latitude
    };

    const { data } = await getResourceInfo(params);
    currentPointInfo.value = data;
  } else if (props.type === 'intelligent') {
    currentPointInfo.value = props.mapData;
  } else {
    const res = await getPointInfo({ type: props.type, id: props.id });
    const { data } = await configKey('n_day_run');
    currentPointInfo.value = res.data;
    Someday.value = data;
  }
});
</script>

<template>
  <div class="dialog" ref="dialog">
    <div class="dialog-header">
      <div class="dialog-title" :title="dialogTitle">
        <span>{{ dialogTitle }}</span>
        <span v-if="isAlarmVideo">
          <span
            :style="{
              color: mapData.status == 0 ? '#ff0000' : '#43ff8b'
            }"
            >({{ mapData.status == 0 ? '离线' : '在线' }} )</span
          >
        </span>
      </div>
      <el-icon class="dialog-close" @click="close()">
        <el-icon-close />
      </el-icon>
    </div>
    <div class="dialog-electronic-fence" v-if="isAlarmVideo && mapData.monitorType === '03'" @click="goElectronicFence(mapData.code)">
      <span> 电子围栏 </span>
    </div>
    <div class="dialog-main">
      <component :is="componentChild" v-model:mapData="currentPointInfo" :id="id" :some-day="Someday" v-if="currentPointInfo"></component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  min-width: 310px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  background-image: url('@/assets/largescreen/xiangqing-kuang.png');
  background-size: 100% 100%;
  z-index: 9;

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0be4f1;
    font-size: 24px;
    font-weight: 700;

    .dialog-title {
      width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dialog-close {
      cursor: pointer;
    }
  }

  .dialog-electronic-fence {
    color: #0be4f1;
    margin: 10px 0;
    cursor: pointer;
    font-weight: 700;

    span:hover {
      border-bottom: 1px solid #0be4f1;
    }
  }
}
</style>
